<template>
  <div class="search-bar">
    <el-input
      v-model="inputValue"
      placeholder="请输入搜索关键词"
      clearable
      @keyup.enter="handleSearch"
    >
      <template #append>
        <el-button :icon="Search" @click="handleSearch" />
      </template>
    </el-input>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const inputValue = ref('')
const router = useRouter()

const handleSearch = () => {
  if (inputValue.value.trim()) {
    router.push({ 
      name: 'Search',
      query: { q: inputValue.value.trim() }
    })
  }
}
</script>

<style scoped>
.search-bar {
  max-width: 600px;
  margin: 0 auto;
}
</style>